<template>
  <div>
    <div class="cameraBox">
      <video id="videoCamera" class="videoCamera" :width="videoWidth" :height="videoHeight"></video>
      <canvas id="canvasCamera" class="canvasCamera" :width="videoWidth" :height="videoHeight"></canvas>
    </div>
    <div>
      <el-button @click="photograph">拍照</el-button>
      <!-- 默认 打开摄像头-->
      <el-button v-if="flag" @click="openCamera">打开摄像头</el-button>
      <el-button v-else @click="closeCamera">关闭摄像头</el-button>
      <el-button @click="resetPhoto">重置</el-button>
      <el-button  @click="goStuInfoEntry">提交</el-button>
    </div>
  </div>
</template>

<script>
// import { CompatSource } from 'webpack-sources';

export default {
  data() {
    return {
      flag: false,
      videoWidth: 500,
      videoHeight: 350,
      thisVideo: null,
      thisContext: null,
      thisCanvas: null,
      imgSrc: ""
    };
  },
  mounted() {
    this.openCamera();
  },
  methods: {
    //打开本地摄像头
    openCamera() {
      this.flag = false;

      this.thisVideo = document.getElementById("videoCamera");
      // navigator.mediaDevices.getDisplayMedia;
      if (navigator.mediaDevices === undefined) {
        navigator.mediaDevices = {};
      }

      //需要适配某些浏览器
      if (navigator.mediaDevices.getUserMedia === undefined) {
        navigator.mediaDevices.getUserMedia = function(constraints) {
          //获取不同的浏览器的getUserMedia
          let getUserMedia =
            navigator.webkitGetUserMedia ||
            navigator.mozGetUserMedia ||
            navigator.getUserMedia;

          //如还是无法获得就告知请更换服务器
          if (!getUserMedia) {
            return Promise.reject(new Error("请更换浏览器"));
          }
          return new Promise((resolve, reject) => {
            getUserMedia.call(navigator, constraints, resolve, reject);
          });
        };
      }
      //传入音频视频文件信息
      const constraints = {
        audio: false,
        video: {
          width: this.videoWidth,
          height: this.videoHeight
        }
      };

      navigator.mediaDevices
        .getUserMedia(constraints)
        .then(res => {
          console.log(res);
          console.log(this.thisVideo);
          if ("srcObject" in this.thisVideo) {
            this.thisVideo.srcObject = res;
          } else {
            this.thisVideo.src = window.URL.createObjectURL(res);
          }
          this.thisVideo.onloadedmetadata = function() {
            console.log("视频元数据加载完毕");
            console.log(this);
            this.play();
          };
        })
        .catch(err => {
          console.log(err);
          this.$message({
            message: "没有开启摄像头或者浏览器不支持请求更换浏览器",
            type: "warning"
          });
        });
    },
    //关闭摄像头
    closeCamera() {
      if (this.thisVideo && this.thisVideo !== null) {
        this.thisVideo.srcObject.getTracks()[0].stop();
        this.flag = true;
      }
    },
    //拍照
    photograph() {
      this.thisCanvas = document.querySelector(".canvasCamera");
      this.thisContext = this.thisCanvas.getContext("2d");
      this.thisContext.drawImage(
        this.thisVideo,
        0,
        0,
        150,
        100
      );
      //上传照片
      this.imgSrc = this.thisCanvas.toDataURL('image/png',0.1);
    },
    //提交
    goStuInfoEntry(){
      console.log(this.imgSrc);
      this.$router.push({
        name:'stuInfoEntry',
        query:{
          imgSrc:this.imgSrc,
        }
      });

    },
    //重置
    resetPhoto(){
      //获取画布画笔
      this.thisCanvas = document.querySelector('.canvasCamera');
      this.thisContext = this.thisCanvas.getContext('2d');
      // console.log(this.thisCanvas);
      // console.log(this.thisContext);
      //清空
      this.thisContext.clearRect(0,0,this.videoWidth,this.videoHeight);

    },
  }
};
</script>

<style>
</style>